.user-page{
        background: #ffffff url(../../assets/picture/bg-user-center@2x.png) no-repeat center top /100% auto;
        .account{
                margin: 0 16px 25px 16px;
                padding-top: 25px;
                display: flex;
                height: 60px;
                .avatar-wrapper{
                        flex: 0 0 60px;
                        margin-right: 16px;
                        background: url(../../assets/picture/bg-avatar@2x.png) no-repeat center /60px 60px;
                        .icon{
                                padding-left: 8px;
                        }
                }
                .user-name{
                        line-height: 60px;
                        font-size: 18px;
                        color: #ffffff;
                }
                .account-container{
                        color: #ffffff;
                        line-height: 30px;
                        font-size: 16px;
                        .phone{
                                .tag{
                                        font-size: 12px;
                                        display: inline-block;
                                        height: 14px;
                                        border: 1px solid #dddddd;
                                        line-height: 14px;
                                        margin-left: 7px;
                                        padding: 0 3px;
                                        border-radius: 2px;
                                        &.error{
                                                color: #fc1515;
                                                border: 1px solid #fc1515;
                                        }
                                        &.success{
                                                background: #ffffff;
                                                color:#666666;
                                        }
                                }
                        }
                }
                .role{
                        color: #dddddd;
                        font-size: 12px;
                }
        }
        .vip-card-wrapper{
                position: relative;
                height: 0;
                overflow: hidden;
                margin: 0 12px;
                padding-bottom: 41%;
                background: url("../../assets/picture/bg-VIP@2x.png") no-repeat center /100% auto;
                .title{
                        display: inline-block;
                        padding-right: 31px;
                        height: 28px;
                        line-height: 28px;
                        background: url(../../assets/picture/icon-vip@2x.png) no-repeat center right/26px 22px;
                        color: #FFE34E;
                        font-size: 20px;
                }
                .text{
                        color: #FFFFFF;
                        font-size: 14px;
                        padding-top: 10px;
                }
                .text-wrapper{
                        position: absolute;
                        top:50%;
                        left: 0;
                        transform: translate3d(24px,-50%,0);
                }
                .btn{
                        position: absolute;
                        right: 24px;
                        top: 50%;
                        color: #458433;
                        width: 60px;
                        line-height: 32px;
                        background: #ffffff;
                        text-align: center;
                        border-radius: 16px;
                        font-size: 12px;
                        &.disabled{
                                color:#ffffff ;
                                background: #458433;
                        }
                }
        }
        .list-cell-wrapper{
                margin:22px 16px;
                .cell-item{
                        position: relative;
                        line-height: 52px;
                        height: 52px;
                        padding-left:38px ;
                        color: #000000;
                        font-size: 16px;
                        border-bottom: 1px solid rgba(221, 221, 221, 0.47);
                        .icon{
                                position: absolute;
                                right: 0;
                                top: 50%;
                                color: #C4C4C4;
                                transform: translate3d(0,-50%,0);
                        }
                        &:nth-child(1){
                                background: url("../../assets/picture/icon-user1@2x.png") no-repeat center left/22px auto;
                        }
                        &:nth-child(2){
                                background: url("../../assets/picture/icon-user2@2x.png") no-repeat center left/22px auto;
                        }
                        &:nth-child(3){
                                background: url("../../assets/picture/icon-user3@2x.png") no-repeat center left/22px auto;
                        }
                        &:nth-child(4){
                                background: url("../../assets/picture/icon-user4@2x.png") no-repeat center left/22px auto;
                        }
                        &:nth-child(5){
                                background: url("../../assets/picture/icon-user5@2x.png") no-repeat center left/22px auto;
                        }
                        &:nth-child(6){
                                background: url("../../assets/picture/icon-user6@2x.png") no-repeat center left/22px auto;
                        }
                        &:nth-child(7){
                                background: url("../../assets/picture/icon-user7@2x.png") no-repeat center left/22px auto;
                        }
                }

        }
}
